<template>
  <view class="ssp-homepage">
    <PublicPage :showHead="false">
      <ScrollList
          ref="scrollView"
          :noTop="true"
          :scrollAnimation="false"
          @scrolltolower="scrolltolower"
          @scroll="_onScroll"
      >
        <template slot="content">
          <!-- 自定义导航栏 -->
          <view class="nav-wrap" :class="{'nav-background':scrollTop>60}" :style="[navStyle]">
            <!-- 返回首页按钮图片 -->
            <image
                v-if="shareObject.shareType||routeLength<=1"
                src="@/static/image/goHome_con.png"
                alt="icon"
                class="back-icon-home"
                @click.stop="_handleBack(0)"
            />
            <!-- 返回上一页按钮图片 -->
            <image
                v-else
                src="@/static/image/navBack_icon.png"
                alt="icon"
                class="back-icon"
                @click.stop="_handleBack(1)"
            />
            <!-- 搜索图标 -->
            <view v-if="scrollTop>=searchScroll" class="nav-search" @click.stop="_handleSearch">
              <i class="iconfont icon-search" />
            </view>
          </view>
          <view class="main-wrap">
            <!-- 背景图片 -->
            <view class="background-wrap">
              <image
                  :src="infoData.backgroundUrl||'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png'"
                  mode="aspectFill"
                  class="bg-image"
              />
            </view>
            <!-- 用户信息区域 -->
            <view class="info-wrap">
              <view class="info-content">
                <view class="info-data">
                  <view class="info-avatar-wrap">
                    <image
                        :src="infoData.communityLogo||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                        mode="aspectFill"
                        class="avatar-image"
                    />
                  </view>
                  <view class="info-data-wrap">
                    <view class="data-item">
                      <text class="data-text">成员</text>
                      <view class="data-num">{{playvolumeFn(infoData.memberCount)||0}}</view>
                    </view>
                    <view class="data-item">
                      <text class="data-text">跟团人次</text>
                      <view class="data-num">{{playvolumeFn(infoData.followGroupCount)||0}}</view>
                    </view>
                    <view class="data-item">
                      <text class="data-text">观看量</text>
                      <view class="data-num">{{playvolumeFn(infoData.browseCount)||0}}</view>
                    </view>
                  </view>
                </view>
                <view class="nickname">{{infoData.communityName}}</view>
                <!-- 自我描述 -->
                <view class="desc-wrap" v-if="!(infoData.isMyself==0&&!infoData.introduce)">
                  <i class="iconfont icon-article" />
                  <text class="desc-text">{{infoData.introduce||'好好介绍下自己，可以吸引更多粉丝～'}}</text>
                </view>
                <!-- 位置 -->
                <!--  <view class="desc-wrap" v-if="!(infoData.isMyself==0&&!infoData.location)">-->
                <!--    <i class="iconfont icon-address" />-->
                <!--    <text class="desc-text">{{infoData.location||'添加位置，让附近的人发现你～'}}</text>-->
                <!--  </view>-->
              </view>
              <!-- 按钮区域 -->
              <view class="group-button">
                <view class="button-l">
                  <button v-if="infoData.isMyself" hover-class="hover" class="edit-btn" @click.stop="_editInfo">编辑资料</button>
                  <button v-else-if="!infoData.isMyself&&!infoData.followStatus" hover-class="hover" class="edit-btn edit-btn-plus" @click.stop="_changeFollow(1)">+关注</button>
                  <button v-else hover-class="hover" class="edit-btn edit-btn-mini" @click.stop="_changeFollow(0)">已关注</button>
                </view>
                <view class="button-r">
                  <!-- TA人主页推荐赚 -->
                  <button v-if="infoData.isOpenRecommendBonus&&!infoData.isMyself" hover-class="hover" class="button" @click="openInvite">
                    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/h_redpacket_icon.png" class="btn-image" />
                    <text class="btn-txt">推荐赚</text>
                  </button>
                  <!-- 自己主页邀请帮卖 -->
<!--                  @click="openInvite"-->
                  <button v-if="infoData.isMyself" hover-class="hover" class="button" @click="openShare(1)">
                    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/h_talentmanage_icon.png" class="btn-image" />
                    <text class="btn-txt">邀请帮卖</text>
                  </button>
                  <button v-if="!infoData.isMyself" hover-class="hover" class="button" @click.stop="_handleConnection">
                    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/h_main_comment_icon.png" class="btn-image" />
                    <text class="btn-txt">联系</text>
                  </button>
                  <button hover-class="hover" id="shareUser" class="button" @click="openShare(2)">
                    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/h_weixin_fill-icon.png" class="btn-image" />
                    <text class="btn-txt">分享</text>
                  </button>
<!--                  <button hover-class="hover" class="button" @click.stop="drawPoster">-->
<!--                    <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share2_icon.png" class="btn-image" />-->
<!--                    <text class="btn-txt">推荐赚</text>-->
<!--                  </button>-->
                </view>
              </view>
            </view>
            <!-- 帮卖介绍区域 -->
            <view
                v-if="infoData.isMyself||(!infoData.isMyself&&relationType==2&&infoData.helpSellIntroduce)"
                class="help-sell-wrap"
                @click="_goHelpSell"
            >
              <view class="help-sell-section">
                <!-- TA人主页 -->
                <u-section
                    v-if="!infoData.isMyself&&relationType==2"
                    :show-line="false"
                    title="帮卖介绍"
                    sub-title="查看详情"
                    font-size="32"
                    color="#323233"
                    sub-color="#969799"
                />
                <!-- 自己的主页 -->
                <u-section
                    v-else
                    :show-line="false"
                    :title="helpSellEmpty?'填写帮卖介绍，可吸引更多人来帮卖':'帮卖介绍'"
                    :sub-title="helpSellEmpty?'去填写':'编辑详情'"
                    :font-size="helpSellEmpty?28:32"
                    color="#323233"
                    sub-color="#969799"
                />
              </view>
              <view v-if="infoData.helpSellIntroduce||infoData.imgUrl.length" class="help-sell-content">
                <view v-if="infoData.helpSellIntroduce" class="content">{{infoData.helpSellIntroduce}}</view>
                 <view class="images">
                   <image v-for="(it,ix) in infoData.imgUrl" :key="ix" :src="it" mode="aspectFill" class="image" />
                 </view>
              </view>
            </view>
            <!-- 选择tab -->
            <view class="u-tabs_box" :style="'top:'+(globalData.navHeight-1)+'px;'">
              <u-tabs
                  :list="tabsList"
                  :current="tabsCurrent"
                  :is-scroll="false"
                  :bold="false"
                  bar-width="80"
                  font-size="32"
                  active-color="#E44435"
                  inactive-color="#969799"
                  @change="tabsChange"
              />
            </view>
            <!-- 搜索 -->
            <view id="search_id">
              <SearchInput
                  :hasBorder="false"
                  :focusType="focusType"
                  placeholder="输入搜索内容"
                  @searchFn="_onSearch"
                  @blur="_onBlur"
              />
            </view>
            <!-- 分类tabs -->
            <view v-if="tabsCurrent===1" class="ssp-tabs" :style="'top:'+(globalData.navHeight+tabsHeight-1)+'px;'">
              <u-tabs
                  :list="categories"
                  :current="cateCurrent"
                  :height="56"
                  :show-bar="false"
                  :active-item-style="activeItemStyle"
                  :itemStyle="itemStyle"
                  active-color="#FFFFFF"
                  font-size="28"
                  :bold="false"
                  :gutter="24"
                  inactive-color="#969799"
                  @change="categoryChange"
              />
            </view>
            <view :style="{minHeight: listHeight+'px'}">
              <!-- 视频流 -->
              <DynamicCard
                  v-if="(videoList.length||listLoading)&&tabsCurrent==0"
                  :type="dynamicType"
                  :list="videoList"
                  :loading="listLoading"
                  @groupBtn="_dynamicGroupBtn"
              />
              <!-- 小店--商品列表 -->
              <GoodsWaterfall
                  v-if="goodsList.length&&tabsCurrent==1"
                  ref="waterfallRef"
                  v-model="goodsList"
              />
              <!-- 缺省状态 -->
              <view v-else-if="isEmpty" :style="{height:emptyHeight+'px'}">
                <DefaultPage :type="defaultType" :tips="defaultTip" />
              </view>
            </view>
          </view>
        </template>
      </ScrollList>
    </PublicPage>
    <!-- 申请帮卖弹框 -->
    <ApplyForHelpSelling
        v-if="dlHelpSell"
        :show="dlHelpSell"
        :othersInfoData="infoData"
        :getRelationType="relationType"
        @cancelFn="()=>dlHelpSell=false"
        @handleNext="openInvite"
    />
    <!-- canvas绘制分享卡片背景图 -->
    <InviteToHelpSellShare ref="helpSellRef" @shareSuccess="_drawHSSuccess" />
    <!-- 朋友圈海报分享 -->
    <HomepagePoster ref="homePosterRef" @posterShareSuccess="_drawHPSuccess"/>
    <!-- 分享朋友圈海报预览 -->
    <posterModal :show="dlPYPoster" :imageUrl="posterImage" @close="(flag)=>dlPYPoster=flag" />
    <!-- 开团成功海报 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="_shareSuccess" />
    <PublishPopup v-if="dlGroup" :sharePublishData="shareObject" @closeSharePublishFn="(flag)=>dlGroup=flag" />
    <!-- 动态分享、邀请帮卖 -->
    <SharePublicPage
        v-if="dlShare"
        :shareVideoData="shareObject"
        @cancelShareFn="(flag) => dlShare = false"
        @posterFn="_posterFn"
    />
    <!-- 保存相册海报分享 -->
    <SharePoster
        v-if="dlPoster"
        :shareVideoData="shareObject"
        @cancelSharePosterFn="()=>dlPoster=false"
    />
    <!-- 已经帮卖弹窗 -->
    <SoldForHelpSell
        v-if="isSoldForHelpSellShow"
        :soldForHelpSellId="soldForHelpSellId"
        @closeSoldForFn="closeSoldForFn"
    />
    <!-- 邀请他人成别供货帮卖 -->
    <InviteOthersToHelpSell
        :show="dlInvite"
        :helpSellData="infoData"
        @closeInviteOthersFn="closeInvite"
        @returnSharedDataFn="returnSharedDataFn"
    />
    <!-- 按钮组的分享公共弹窗 -->
    <SharePopup
        v-if="isShowSharePopup"
        :shareObject="shareObject"
        @closeShareFn="isShowSharePopup=false"
        @drawPosterFn="drawPoster"
    />
    <!-- toast提示 -->
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import SearchInput from '@/components/searchInput/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import GoodsWaterfall from '@/components/goodsWaterfall/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import InviteToHelpSellShare from '@/components/shareImage/inviteToHelpSellShare.vue'
import HomepagePoster from '@/components/shareImage/homepagePoster.vue'
import posterModal from './components/posterModal.vue'
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import PublishPopup from '@/components/publishPopup/index.vue'
import SharePublicPage from '@/components/shareModal/sharePublicPage.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import ApplyForHelpSelling from '../components/applyForHelpSelling.vue'
import SoldForHelpSell from '@/components/soldForHelpSell/index.vue'
import SharePopup from '@/components/shareModal/sharePopup.vue'
//邀请他人成别供货帮卖
import InviteOthersToHelpSell from "@/components/inviteOthersToHelpSell/index.vue"

import User from '@/api/user.js'
import Dynamic from '@/api/dynamic.js'
import Share from '@/api/share.js'
import miniApi from '@/api/mini.js'
import goodsApi from '@/api/goods.js'

import Util from '@/api/util.js'
import methodMixin from '@/components/dynamicCard/methodMixin.js'

// 默认头像
const defaultAvatar = 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'
// 默认背景
const defaultBgUrl = 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png'
export default {
  name: 'homePage',
  // 分享、海报相关在shareMixin中
  mixins: [methodMixin],
  components: {
    PublicPage,
    ScrollList,
    SearchInput,
    DynamicCard,
    GoodsWaterfall,
    DefaultPage,
    InviteToHelpSellShare,
    HomepagePoster,
    posterModal,
    SharePoster,
    ApplyForHelpSelling,
    OpenGroupSharing,
    PublishPopup,
    SharePublicPage,
    SoldForHelpSell,
    InviteOthersToHelpSell,
    SharePopup,
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
    // 自定义导航栏样式
    navStyle() {
      const { navHeight, navTop, menuButtonObject } = this.$store.state.globalData
      const paddingBottom = navHeight - menuButtonObject.height - navTop
      const paddingRight = menuButtonObject.width + 14
      const style = {
        height: `${navHeight}px`,
        padding: `${navTop}px ${paddingRight}px ${paddingBottom}px 12px`,
      }
      return style
    },
    // tabs中active样式
    activeItemStyle() {
      return {
        background: '#E44435',
        borderRadius: '44rpx'
      }
    },
    // tab item样式
    itemStyle() {
      return {
        background: '#F2F3F5',
        borderRadius: '44rpx',
        margin: '0 8rpx'
      }
    },
    // 路由历史长度
    routeLength() {
      return getCurrentPages().length
    },
  },
  data() {
    return {
      shareFrom: 2, // 1为邀请帮卖-2为普通分享
      isShowSharePopup: false, // 按钮组的分享公共弹窗变量
      inviteShareObj: {}, // 邀请好友，赚奖金对象
      // shareObject: {}, // 分享对象--用户分享卡片出去的
      shareData: {}, // 通过调用接口获取的用户分享数据
      routeData: {}, // url参数
      infoData: {}, // 社群主页用户信息
      focusType: false, // 输入搜索框焦点状态
      keyword: '', // 搜索框
      relationType: 0, // 绑定关系的状态-->0:没有关系, 1:审核中, 2:通过, 3:拒绝
      dlHelpSell: false, // 弹出申请通过绑定关系弹出变量
      dlPYPoster: false, // 海报预览
      posterImage: '', // 分享朋友圈海报url
      videoList: [],
      dynamicType: 2, // 动态卡片类型
      listLoading: true, // 加载骨架图
      listMore: true, // 加载更多标识
      page: {currentPage: 1, pageSize: 10},
      defaultType: 2, // 缺省页状态
      defaultTip: '暂时没有发布内容哦～',
      scrollTop: 0, // 页面y轴滚动的位置
      searchScroll: 1, // 搜索框的在Y轴的位置
      helpSellEmpty: false, // 帮卖介绍空状态--自己
      timeout: null,
      tabsList: [{name: "笔记"}, {name: "小店"}],
      tabsCurrent: 0,
      categories: [], // 小店分类列表
      cateCurrent: 0, // 激活分类下标
      goodsList: [], // 小店列表
      goodsPage: { // 小店参数
        currentPage: 1,
        pageSize: 20,
        categoryId: null
      },
      isEmpty: false,
      listHeight: 0, // 列表的最小高度
      emptyHeight: 0, // 空状态高度
      isSoldForHelpSellShow: false, // 帮卖过了不可帮卖
      soldForHelpSellId: '', // 已经帮卖返回自己帮卖团的id
      isBonus: false, // 是否从推荐奖金分享进来的变量
      dlInvite: false, // 邀请好友的弹框变量
      tabsHeight: 40, // u-tabs_box的高度
    }
  },
  async onLoad(option) {
    await this.isLoSignInFn(option)
    this.routeData = Object.assign(option, this.$store.state.shareRouteData)
    if (this.routeData && this.routeData.from === 'bonus') {
      this.isBonus = true
    }
    // 校验是否登录
    this.getInfoData()
    this.getVideos()
    // 禁用菜单的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
  },
  onShow() {
    if (this.getIsRefreshType()) {
      this.setIsRefreshType(false)
      this.getInfoData()
      this.getVideos()
    }
  },
  onReady() {
    setTimeout(async () => {
      const { windowHeight, safeBottom } = this.globalData
      const searchDoms = await this.getUNavbarHeight('#search_id')
      const tabsDoms = await this.getUNavbarHeight('.u-tabs_box')
      this.tabsHeight = tabsDoms.height
      // 滚动的位置
      this.searchScroll = tabsDoms.top - tabsDoms.height
      if(this.globalData.model.indexOf('iPhone') === -1) {
        this.searchScroll = this.searchScroll + 14
      }
      const diffHeight = searchDoms.top + searchDoms.height + safeBottom
      this.listHeight = windowHeight - diffHeight + 15
      this.emptyHeight = windowHeight - diffHeight
      if (this.emptyHeight < 200) this.emptyHeight = 200
    },100)
  },
  onShareAppMessage(res) {
    // shareUser --> id
    const _shareObj = {
      title: '这是我的个人主页，我的视频都在这里，关注我随时获取最新动态。',
      imageUrl: this.shareObject.url,
      path: `/pagesB/personalCenter/homePage&idCode=${this.$store.state.userInfo.idCode}`
    }
    // 所有分享链接必须带上shareType=true
    _shareObj.path = this.shareObject.path
    _shareObj.title = this.shareObject.title
    if (!this.infoData.isMyself) {
      _shareObj.title = `快来关注${this.infoData.communityName}的个人主页,TA的视频都在这里，太精彩!`
    }
    if (res.from === 'button') {
      if (res.target.id === 'publishId') {
        _shareObj.title = this.shareObject.title
        _shareObj.imageUrl = this.shareObject.url
        _shareObj.path = `/pagesB/dynamic/${this.shareObject.mediaType && this.shareObject.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?dynamicId=${this.shareObject.dynamicId}&shareType=true&type=2&idCode=${this.$store.state.userInfo.idCode}`
      } else if (res.target.id === 'sharewx') {
        _shareObj.path = `/pagesB/dynamic/${this.shareObject.mediaType && this.shareObject.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?dynamicId=${this.shareObject.dynamicId}&shareType=true&type=99&idCode=${this.$store.state.userInfo.idCode}`
        // 公用的分享
        const commonShare = this.$store.state.pageSharingData
        if (Object.prototype.hasOwnProperty.call(commonShare, 'url')) {
          if (commonShare.isShareType === 2) {
            // 邀请帮卖
            _shareObj.path = `/pagesB/dynamic/${this.shareObject.mediaType && this.shareObject.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?dynamicId=${this.shareObject.dynamicId}&shareType=true&type=99&applyForHelp=true&idCode=${this.$store.state.userInfo.idCode}`
          }
          _shareObj.title = commonShare.title
          _shareObj.imageUrl = commonShare.url
        }
      } else if (res.target.id === 'nviteEarn') {
        _shareObj.title = this.inviteShareObj.title
        _shareObj.imageUrl = this.inviteShareObj.url
        _shareObj.path = this.inviteShareObj.path
      }
    }
    // 分享参数打印
    console.log(JSON.parse(JSON.stringify({_shareObj})), '分享参数打印')
    return _shareObj
  },
  methods: {
    closeSoldForFn () {
      this.$store.commit('PUBLIC_UPDATE_DATA',null)
      this.isSoldForHelpSellShow = false
    },
    // 视频、小店切换函数
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
    async tabsChange (index) {
      const tabsDoms = await this.getUNavbarHeight('.u-tabs_box')
      const searchDoms = await this.getUNavbarHeight('#search_id')
      const { windowHeight, safeBottom, navHeight } = this.globalData
      this.listHeight = windowHeight - (tabsDoms.top + tabsDoms.height + safeBottom)
      this.emptyHeight = this.listHeight
      if (this.emptyHeight <= 200) this.emptyHeight = 200

      this.tabsCurrent = index
      this.isEmpty = false
      if (index === 0) {
        this.page.currentPage = 1
        this.listMore = true
        this.getVideos()
      } else {
        this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
        this.goodsPage.currentPage = 1
        this.listMore = true
        this.getTabs()
        this.getGoodsList()
      }
      if (searchDoms.top <= navHeight) {
        this.$refs.scrollView.goToScroll(this.searchScroll)
      }
      this.$refs.scrollView&&this.$refs.scrollView.loadFinish(0) // 有更多数据加载
    },
    // 获取分类列表
    async getTabs() {
      const { data } = await goodsApi.getShopCategory({ accountId: this.infoData.accountId })
      const categories = data || []
      categories.unshift({ name: '全部', id: null })
      this.categories = categories
    },
    // 小店分类切换
    categoryChange(index) {
      this.cateCurrent = index
      const item = this.categories[index]
      this.goodsPage.categoryId = item.id
      this.isEmpty = false
      this.listMore = true
      this.goodsPage.currentPage = 1
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
      setTimeout(async () =>{
        const cateTabDoms = await this.getUNavbarHeight('.ssp-tabs')
        const { windowHeight, safeBottom, navHeight } = this.globalData
        const diffHeight = cateTabDoms.top + cateTabDoms.height + safeBottom
        // console.log(cateTabDoms, 'cateTabDoms')
        this.listHeight = windowHeight - diffHeight
        this.emptyHeight = windowHeight - diffHeight
        const tabsDoms = await this.getUNavbarHeight('.u-tabs_box')
        // console.log(tabsDoms, 'tabsDoms')
        if (cateTabDoms.top <= (tabsDoms.height + navHeight)) {
          this.$refs.scrollView.goToScroll(this.searchScroll)
        }
        this.$refs.scrollView && this.$refs.scrollView.loadFinish(0)
        this.getGoodsList()
      }, 0)
    },
    // 获取小店列表--商品列表
    getGoodsList() {
      const params = {
        currentPage: this.goodsPage.currentPage,
        pageSize: this.goodsPage.pageSize,
        accountId: this.infoData.accountId,
        type: 1
      }
      if (this.goodsPage.categoryId) params.categoryId = this.goodsPage.categoryId
      if (this.keyword) params.goodsName = this.keyword
      goodsApi.getShopWindow(params).then(res => {
        if (this.goodsPage.currentPage === 1) {
          this.goodsList = res.data.records
          if (!this.goodsList.length) this.isEmpty = true
        } else {
          this.goodsList = this.goodsList.concat(res.data.records)
        }
        // 无更多数据标识
        if ((this.goodsPage.currentPage * this.goodsPage.pageSize) !== this.goodsList.length) {
          this.listMore = false
          this.$refs.scrollView.loadFinish(3)
        }
      }).catch(() => {
        this.$refs.scrollView.loadFinish(3)
      })
    },
    // 获取社群主页用户信息
    async getInfoData() {
      const params = {}
      // 兼容分享出去的accountId可能为undefined
      // accountId是从融云IM获取的，在链接不到融云的情况下，accountId为undefined
      if (this.routeData.accountId && this.routeData.accountId !== 'undefined') {
        params.accountId = this.routeData.accountId
      }
      const res = await User.getOthersInfo(params)
      this.infoData = res.data
      if (this.infoData.imgUrl) {
          try {
            this.infoData.imgUrl = JSON.parse(this.infoData.imgUrl)
          } catch {
            this.infoData.imgUrl = []
          }
      } else {
        this.infoData.imgUrl = []
      }
      // 只显示5张图片
      if (this.infoData.imgUrl.length >= 6) {
        this.infoData.imgUrl = this.infoData.imgUrl.slice(0, 5)
      }
      this.$store.commit('OTHERS_INFO_DATA', res.data)

      // 判断是否是自己的社群主页 isMyself-->1是自己
      if (res.data.isMyself && res.data.isMyself === 1) {
        this.dynamicType = 2
        // 帮卖介绍区域变量值
        if (this.infoData.helpSellIntroduce || this.infoData.imgUrl.length) {
          this.helpSellEmpty = false
        } else {
          this.helpSellEmpty = true
        }
      } else {
        this.dynamicType = 3
        this.helpSellEmpty = true
        // recommendCode--推荐人的code
        if (Object.prototype.hasOwnProperty.call(this.routeData, 'recommendCode') && this.routeData.recommendCode !== 'undefined') {
          this.infoData.recommendCode = this.routeData.recommendCode
        }
        // 调用查询绑定关系--非自己
        this.getRelation(res.data.idCode||this.routeData.idCode)
      }
    },
    // 获取分享卡片、分享朋友圈用户数据信息
    getShareData() {
      Share.getShareInfo({}).then(res => {
        this.shareData = res.data
        this.drawInvite()
      })
    },
    // 查询是否绑定关系
    getRelation(idCode) {
      User.getRelation({ idCode }).then(res => {
        this.relationType = res.data.relation
        if (this.relationType === 2 && !this.infoData.isOpenRecommendBonus && this.isBonus) {
          // 已是帮卖且供货关闭推荐帮卖
          this.$refs.uToast.show({ title: '供货已关闭推荐帮卖功能'})
        } else if (this.relationType === 2 && this.infoData.isOpenRecommendBonus && this.isBonus) {
          this.infoData.groupAccountId = this.infoData.accountId
          this.infoData.groupAvatar = this.infoData.communityLogo
          this.infoData.groupNickname = this.infoData.communityName
          // 已是帮卖+供货开启推荐帮卖+从推荐奖金分享过来
          this.dlInvite = true
        } else if (this.relationType != 2 && this.routeData.applyForHelp) {
          // 供货推荐开启才弹出申请帮卖弹框
          if (this.isBonus && this.infoData.isOpenRecommendBonus) {
            this.dlHelpSell = true
            return
          }
          // 邀请帮卖时弹出
          if (!this.isBonus) {
            this.dlHelpSell = true
          }
        }
      })
    },
    // 获取视频流列表
    getVideos() {
      const params = {
        ...this.page,
        type: 3
      }
      if (this.keyword) params.keyword = this.keyword
      // 兼容分享出去的accountId可能为undefined
      // accountId是从融云IM获取的，在链接不到融云的情况下，accountId为undefined
      if (this.routeData.accountId && this.routeData.accountId !== 'undefined') {
        params.accountId = this.routeData.accountId
      }
      miniApi.getDynamicList(params).then(res => {
        if (this.page.currentPage === 1) {
          this.videoList = res.data.records
          if (!this.videoList.length) this.isEmpty = true
        } else {
          this.videoList = this.videoList.concat(res.data.records)
        }

        if ((this.page.currentPage * this.page.pageSize) !== this.videoList.length) {
          // 无更多数据标识
          this.listMore = false
          this.$refs.scrollView.loadFinish(3) // 无更多数据
        }
      }).catch(() => {
        this.$refs.scrollView.loadFinish(3)
      })

      // 第一页才有骨架图
      if (this.page.currentPage === 1 && this.listLoading) {
        if (this.timeout) clearTimeout(this.timeout)
        // 隐藏骨架图标识
        this.timeout = setTimeout(() => {
          this.listLoading = false
        }, 750)
      }
    },
    // 底部加载更多
    scrolltolower(){
      if (this.tabsCurrent === 0) {
        ++this.page.currentPage
        this.getVideos()
      } else {
        ++this.goodsPage.currentPage
        this.getGoodsList()
      }
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3, 500) // 加载完成
    },
    _onScroll(e) {
      this.scrollTop = e.detail.scrollTop
    },
    // type-->0 点击分享链接进来\当前历史路由只有当前页
    // type-->1 点击返回上一页
    _handleBack(type) {
      switch (type) {
        case 0:
          this.switchTab({ url: '/pages/index/index' })
          break
        case 1:
          if (this.routeLength <= 1) {
            this.switchTab({ url: '/pages/index/index' })
          } else {
            // 更新数据仓库
            this.$store.commit('PUBLIC_UPDATE_DATA', {
              index: Number(this.routeData.index || 0),
              isFollow: this.infoData.followStatus
            })
            this.navigateBack({ delta: 1 })
          }
      }
    },
    // 调整编辑个人资料
    _editInfo() {
      if (this.infoData.isMyself) {
        this.navigateTo({ url: '/pagesB/personalCenter/editPersonalM' })
      }
    },
    // 关注状态切换
    _changeFollow(type) {
      const this_ = this
      if (type === 0) {
        wx.showModal({
          cancelText: '取消',
          confirmText: '确定',
          confirmColor: '#E34D59',
          content: '真的要取消关注吗？',
          success (res) {
            if (res.confirm) {
              Dynamic.follow({
                followAccountId: this_.routeData.accountId,
                isFollow: type
              }).then((res)=>{
                this_.updateFollow(type)
              })
            }
          }
        })
      } else if (type === 1) {
        Dynamic.follow({
          followAccountId: this_.routeData.accountId,
          isFollow: type
        }).then((res)=>{
          wx.showToast({
            title: '关注成功！',
            icon: "none",
            duration: 500
          })
          this_.updateFollow(type)
        })
      }
    },
    // 更新数据仓库中的关注状态
    updateFollow(type) {
      // 获取数据仓库中的社群用户信息
      const _infoData = this.$store.state.othersInfoData
      const _videoFlows = this.$store.state.videoFlowList
      _infoData.followStatus = type
      this.$store.commit('OTHERS_INFO_DATA', _infoData)
      this.$store.commit('FOLLOW_TYPE', _infoData)
      _videoFlows.forEach(item => {
        if (item.accountId == this.routeData.accountId) {
          item.followStatus = type
        }
      })
      this.$store.commit('VIDEO_FLOW_LIST', _videoFlows)
    },
    // 跳转im聊天界面
    _handleConnection() {
      if (this.$store.state.imUserInfo.imId === this.routeData.accountId) {
        return uni.showToast({
          title: '不能联系自己!',
          icon: 'none'
        })
      } else {
        this.navigateTo({ url: '/pagesB/message/messageDetails?id=' + this.routeData.accountId })
      }
    },
    // 分享朋友卡片背景绘制
    drawInvite() {
      const canvasData = {
        type: 2,
        fansText: '成员数',
        highQualityText: '视频数',
        watchText: '观看人次',
        btnText: '马上关注',
        isLoadType: true,
      }
      if (this.shareFrom === 1) {
        canvasData.btnText = '立即加入'
      }
      const { isMyself } = this.infoData
      if (isMyself) {
        const { communityLogo, communityName, introduce, memberCount, dynamicCount, browseCount } = this.shareData
        canvasData.userAvatar = communityLogo || defaultAvatar // 团长头像
        canvasData.userNickname = communityName || '用户的社群昵称'
        canvasData.title = introduce || '好好介绍下自己，可以吸引更多粉丝～'
        canvasData.fansMun = Util.playvolume(memberCount || 0)
        canvasData.highQualityMun = Util.playvolume(dynamicCount || 0)
        canvasData.watchMun = Util.playvolume(browseCount || 0)
      } else {
        const { communityLogo, communityName, introduce, memberCount, dynamicCount, browseCount } = this.infoData
        canvasData.userAvatar = communityLogo || defaultAvatar // 团长头像
        canvasData.userNickname = communityName || '用户的社群昵称'
        canvasData.title = introduce || '好好介绍下自己，可以吸引更多粉丝～'
        canvasData.fansMun = Util.playvolume(memberCount || 0)
        canvasData.highQualityMun = Util.playvolume(dynamicCount || 0)
        canvasData.watchMun = Util.playvolume(browseCount || 0)
      }
      this.$refs.helpSellRef.shareFrends(canvasData)
    },
    // 分享卡片背景绘制成功回调
    _drawHSSuccess(res) {
      if (res.code == 200) {
        this.shareObject.url = res.url
        if (this.infoData.isMyself) {
          this.shareObject.title = '这是我的个人主页，我的视频都在这里，关注我随时获取最新动态。'
          if (this.shareFrom === 1) {
            this.shareObject.title = `${this.infoData.communityName}邀请你成为TA的帮卖团长，货源都给你，轻松赚佣金！`
          }
        } else {
          this.shareObject.title = `快来关注${this.infoData.communityName}的个人主页,TA的视频都在这里，太精彩!`
        }
        this.isShowSharePopup = true
      }
    },
    // 分享朋友圈海报绘制
    drawPoster() {
      // if (this.posterImage) {
      //   this.dlPYPoster = true
      //   return
      // }
      this.isShowSharePopup = false
      const canvasData = {
        page: 'pagesB/personalCenter/homePage', // 二维码地址
        options: {
          accountId: this.infoData.accountId,
          shareType: true, // 所有分享链接必须带上shareType=true
        },
        fansText: '成员数',
        highQualityText: '视频数',
        watchText: '观看人次',
        codeText1: '长按识别关注，随时获取我的最新动态',
      }
      // 自己的邀请帮卖
      if (this.shareFrom === 1) {
        canvasData.options.applyForHelp = true
      }
      const { isMyself } = this.infoData
      if (isMyself) {
        const { communityLogo, communityName, introduce, memberCount, dynamicCount, browseCount, backgroundUrl } = this.shareData
        // 分享自己的社群主页
        canvasData.bgImgUrl = backgroundUrl || defaultBgUrl
        canvasData.userAvatar = communityLogo || defaultAvatar
        canvasData.userNickname = communityName || '用户的社群昵称'
        canvasData.fansMun = Util.playvolume(memberCount || 0)
        canvasData.highQualityMun = Util.playvolume(dynamicCount || 0)
        canvasData.watchMun = Util.playvolume(browseCount || 0)
      } else {
        // 分享TA人的社群主页
        const { communityLogo, communityName, introduce, memberCount, dynamicCount, browseCount, backgroundUrl } = this.infoData
        // 分享自己的社群主页
        canvasData.bgImgUrl = backgroundUrl || defaultBgUrl
        canvasData.userAvatar = communityLogo || defaultAvatar
        canvasData.userNickname = communityName || '用户的社群昵称'
        canvasData.fansMun = Util.playvolume(memberCount || 0)
        canvasData.highQualityMun = Util.playvolume(dynamicCount || 0)
        canvasData.watchMun = Util.playvolume(browseCount || 0)
      }
      this.$refs.homePosterRef.sharePosterFrends(canvasData)
    },
    // 分享朋友圈海报绘制成功回调
    _drawHPSuccess(res) {
      if (res.code == 200) {
        this.posterImage = res.url
        this.dlPYPoster = true
      }
    },
    // 搜索框搜索
    _onSearch(val) {
      this.keyword = val
      if (val) {
        this.defaultType = 3
        this.defaultTip = '暂未搜索相关结果，换个关键词试试～'
      } else {
        this.defaultType = 2
        this.defaultTip = '暂时没有发布内容哦～'
      }
      this.listMore = true
      this.isEmpty = false
      if (this.tabsCurrent === 0) {
        this.page.currentPage = 1
        this.getVideos()
      } else {
        this.goodsPage.currentPage = 1
        this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
        this.getGoodsList()
      }
    },
    // 搜索失去焦点--重置搜索框的聚焦状态以及滚动位置
    _onBlur() {
      this.focusType = false
      this.$refs.scrollView.goToScroll(0)
    },
    // 顶部导航栏搜索按钮
    _handleSearch() {
      this.focusType = true
      this.$refs.scrollView.goToScroll(0)
    },
    // 调整帮卖介绍页
    _goHelpSell() {
      const { accountId } = this.routeData
      if (accountId && accountId !== 'undefined') {
        this.navigateTo({url: `/pagesB/helpSellIntroduce/index?accountId=${accountId}&from=homePage`})
      } else {
        this.navigateTo({url: `/pagesB/helpSellIntroduce/index?accountId=${this.$store.state.userInfo.accountId}&from=homePage`})
      }
    },
    // 申请成为帮卖--从推荐奖金分享进来--申请通过之后+点击邀请好友按钮
    openInvite() {
      this.infoData.groupAccountId = this.infoData.accountId
      this.infoData.groupAvatar = this.infoData.communityLogo
      this.infoData.groupNickname = this.infoData.communityName
      this.dlInvite = true
    },
    // 邀请他人成别供货帮卖--返回的分享数据
    returnSharedDataFn(data) {
      this.dlHelpSell = false
      this.inviteShareObj.title = data.title
      this.inviteShareObj.url = data.imageUrl
      this.inviteShareObj.path = data.path
    },
    closeInvite() {
      this.dlHelpSell = false
      this.dlInvite = false
    },
    // 按钮组--分享时弹出弹窗 type1为邀请帮卖-type2为普通分享
    openShare(type) {
      this.shareFrom = type
      if (type === 1) {
        this.shareObject.path = `/pagesB/personalCenter/homePage?accountId=${this.infoData.accountId}&applyForHelp=true&shareType=true`
      } else {
        this.shareObject.path = `/pagesB/personalCenter/homePage?accountId=${this.infoData.accountId}&shareType=true`
      }
      // 调用分享接口
      this.getShareData()
    }
  }
}
</script>
<style lang="scss" scoped>
.ssp-homepage {
  position: relative;
  width: 100%;
  .nav-wrap {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: transparent;
    &.nav-background {
      border-bottom: 2rpx solid #F2F3F5;
      background-color: #ffffff;
    }
    .back-icon {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
      background-size: cover;
      z-index: 9;
    }
    .back-icon-home {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
      background-size: cover;
      z-index: 9;
    }
    .nav-search {
      width: 48rpx;
      height: 48rpx;
      border-radius: 24rpx;
      line-height: 48rpx;
      text-align: center;
      color: #333333;
      background-color: $n2Color;
    }
  }
  .background-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 376rpx;
    .bg-image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .info-wrap {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: -20rpx 0 0 0;
    padding: 20rpx 32rpx 32rpx 32rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    background-color: #ffffff;
    box-shadow: 0 -4rpx 24rpx rgba(150, 151, 153, 0.16);
    .info-content {
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .info-data {
      display: flex;
      height: 106rpx;
      width: 100%;
    }
    .info-avatar-wrap {
      box-sizing: border-box;
      width: 160rpx;
      height: 160rpx;
      margin: -60rpx 80rpx 0 0;
      border-radius: 50%;
      border: 4rpx solid $n2Color;
      overflow: hidden;
    }
    .avatar-image {
      width: 100%;
      height: 100%;
    }
    .info-data-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 428rpx;
      height: 80rpx;
    }
    .data-num {
      margin-top: 8rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      color: #323232;
      font-weight: 600;
    }
    .data-text {
      display: block;
      line-height: 32rpx;
      font-size: 24rpx;
      text-align: center;
      color: #969799;
    }
    .nickname {
      margin-top: 26rpx;
      font-size: 40rpx;
      line-height: 56rpx;
      font-weight: 600;
      color: #323233;
      @include bov(1)
    }
    .desc-wrap {
      display: flex;
      flex-direction: row;
      flex: 1;
      width: 100%;
      margin: 30rpx 0 0 0;
      .icon-article,
      .icon-address {
        padding: 6rpx 8rpx 0 0;
        font-size: 32rpx;
      }
    }
    .desc-text {
      display: inline-block;
      width: 660rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      color: rgba(0, 0, 0, 0.6);
      word-wrap: break-word;
    }
    .group-button {
      display: flex;
      justify-content: space-between;
      //align-items: center;
      margin-top: 48rpx;
    }
    .edit-btn {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 292rpx;
      height: 56rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      border: 2rpx solid $themeColor;
      color: $themeColor;
    }
    .edit-btn-plus {
      width: 292rpx;
      border: none;
      color: #ffffff;
      background-color: $themeColor;
    }
    .edit-btn-mini {
      width: 292rpx;
      border: none;
      background-color: $n2Color;
      color: $n6Color;
    }
    .button-r {
      display: flex;
      .button {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80rpx;
        height: 92rpx;
        margin-left: 32rpx;
        padding: 0;
      }
      .btn-image {
        //display: block;
        width: 56rpx;
        width: 56rpx;
        margin: 0 0 8rpx;
        padding: 0;
      }
      .btn-txt {
        font-size: 20rpx;
        line-height: 28rpx;
        color: $n6Color;
      }
    }
  }
  .help-sell-wrap {
    box-sizing: border-box;
    padding: 0 32rpx;
    margin: 24rpx 0;
    background-color: #FFFFFF;
    .help-sell-section {
      padding: 22rpx 0;
    }
    .help-sell-content {
      padding: 24rpx 0;
    }
    .content {
      margin-bottom: 24rpx;
      @include bov(2);
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n8Color;
    }
    .images {
      display: flex;
    }
    .image {
      width: 128rpx;
      height: 128rpx;
      margin-right: 16rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .u-tabs_box {
    position: sticky;
    z-index: 80;
    padding: 0 128rpx;
    background-color: #ffffff;
  }
  .ssp-tabs {
    position: sticky;
    left: 0;
    top: 200rpx;
    z-index: 79;
    height: 96rpx;
    padding: 18rpx 0 14rpx 24rpx;
    background-color: #ffffff;
  }
}
</style>
